<template>
    <div class="detail">

        <Head :title="'账单详情'" :color="'#37a762'"></Head>
        <div class="card">
            <div class="title">
                <i class="iconfont" :class="[icons[details.type_name], { 'active': details.pay_type === 2 }]"></i>
                <span>{{ details.type_name }}</span>
                <van-icon class="arrow" name="play" />
            </div>
            <div class="money">{{ details.pay_type === 1 ? '-' + details.amount : '+' + details.amount }}</div>
            <ul class="msg">
                <li>
                    <span class="label">记录时间</span>
                    <span class="value">{{ formatteDate(new Date(Number(details.date)))[0] }}年{{ formatteDate(new
                        Date(Number(details.date)))[1] }}月{{ formatteDate(new Date(Number(details.date)))[2] }}日
                        {{ formatteHours(new Date(Number(details.date))) }}</span>
                </li>
                <li>
                    <span class="label">备注</span>
                    <span class="value">{{ details.remark }}</span>
                </li>
            </ul>
            <div class="handle">
                <div @click="deleteAcount">
                    <i class="iconfont icon-ziyuanxhdpi"></i>
                    <span class="delete">删除</span>
                </div>
                <div @click="editBill">
                    <i class="iconfont icon-bianji"></i>
                    <span class="edit">编辑</span>
                </div>
            </div>
        </div>
    </div>
    <PopEdit @queryAccount="onRefresh" ref="PopEditRef" :billDetail="details"></PopEdit>

</template>

<script setup>
import Head from '@/components/Head.vue'
import { useRoute } from 'vue-router';
import axios from '@/api/index.js';
import { onMounted, ref } from 'vue';
import formatteDate from '@/utils/date.js'
import formatteHours from '@/utils/hours.js'
import icons from '@/utils/icons.js'
import { showConfirmDialog, showSuccessToast } from 'vant';
import { useRouter } from 'vue-router';
import PopEdit from '@/components/PopAdd.vue'


const route = useRoute();
const details = ref({})
const router = useRouter()
const PopEditRef = ref('')

// 获取账单详情api /api/bill/detail?id=xxx  get
// 点击删除弹出确认框   /api/bill/delete  post    id:xxx

const getBillDetail = () => {
    axios.get(`/api/bill/detail?id=${route.query.id}`).then(res => {
        console.log(res.data);
        details.value = res.data
    })
}
getBillDetail()

const deleteAcount = () => {
    showConfirmDialog({
        confirmButtonColor: '#37a762',
        message:
            '您确定要删除吗。',
    })
        .then(() => {
            axios.post('/api/bill/delete', { id: route.query.id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    showSuccessToast('删除成功');
                    setTimeout(() => {
                        router.push('/home')
                    }, 1000)
                }
            })
        })
        .catch(() => {
        });
}

const editBill = () => {
    PopEditRef.value.show = true
}

const onRefresh = () => {
    getBillDetail()
}
</script>

<style lang="less" scoped>
.detail {
    background-color: #e8e8e8;
    height: 100vh;

    .card {
        margin: 0 10px;
        margin-top: 10px;
        padding: 0 25px;
        background-color: #fff;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 0;

            span {
                font-size: 14px;
                margin: 0 5px;
            }

            .iconfont {
                display: inline-block;
                width: 25px;
                height: 25px;
                line-height: 25px;
                border-radius: 50%;
                text-align: center;
                background-color: #37a762;
                color: #fff;
            }
        }

        .money {
            font-size: 30px;
            text-align: center;
            font-weight: bold;
        }

        .msg {
            list-style: none;
            margin-top: 20px;
            width: 100%;

            li {
                display: flex;
                padding: 15px 0;

                .label {
                    font-size: 14px;
                    color: #888;
                    flex: 1;
                }

                .value {
                    font-size: 14px;
                    color: #333;
                    flex: 3;
                }
            }

            li:last-child {
                border-bottom: 1px solid #f0f0f0;
                padding-bottom: 40px;
            }
        }

        .handle {
            display: flex;
            padding: 20px 0;

            div {
                display: flex;
                width: 100%;
                justify-content: center;
                font-size: 14px;

                .iconfont {
                    margin-right: 10px;
                    color: #888;
                }

                .icon-ziyuanxhdpi {
                    color: red
                }
            }

            div:first-child {
                border-right: 1px solid #f0f0f0;
                color: red;
            }
        }
    }
}

.active {
    background-color: #F2B63B !important;
}
</style>